<template>

    <!-- <div  v-for="(item,index) in list" :key="index"> -->
      <tbody>
           <tr>
             <td> 
               <input  type="checkbox" v-model="item.checked"@change="(e) => {cbChange(e, index)}" :id="index" />
             </td>
              <td>{{item.name}}</td>
              <td>{{item.price}}</td>
              <!-- <td><button @click="sum">-</button>{{num}}<button @click="red">+</button></td> -->
              <td>
                <!-- <button  v-model="item.num" @change="(e) => {handleChange(e, index)}">-</button> -->
                <button @click="reduce(index)">-</button>{{item.num}}<button @click="sum(index)">+</button>
                <!-- {{item.num}} -->
                <!-- <button  v-model="item.num" @change="(e) => {handleChange(e, index)}">+</button> -->
              </td>
               <td>{{item.num*item.price}}</td>
               <td><button @click="del(index)">删除</button></td>
            </tr>
       </tbody>
    <!-- </div> -->
</template>

<script>
import { mapState} from 'vuex'
export default {
  // computed: {
  //   ...mapState(['list']),
  // },

   props: ['item', 'index',"list"],
  methods: {
    // 统计数发生变化
    handleChange(e, id) {
      // console.log(e, id)
      const obj = {
        count: e,
        id: id,
      }
      this.$store.commit('handleChange', obj)
    },
    // 复选框发生变化事件
    cbChange(e, id) {
      const obj = {
        status: e.target.checked,
        id: id,
      }
      this.$store.commit('cbChange', obj)
    },

reduce (indexran) {
      console.log('索引', indexran)
      this.$store.commit('redCount', indexran)
    },
    sum (index1ran) {
      console.log('索引', index1ran)
      this.$store.commit('addCount', index1ran)
      // this.$store.commit(index2, 1)
    },
     del (index2ran) {


       console.log(this.list);
      this.list.splice(index2ran, 1)

      // this.$store.commit('delCount', index2ran)
      
    },
  },
  created() {
    // this.$store.dispatch('getList')
  },
}
</script>

<style lang="less" scoped>

</style>
